<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>省市级联查询</title>
    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    <script>
        function queryProvinceList() {
            $.ajax({
                url: "queryProvinceList",
                dataType: "json",
                success: function (resp) {
                    //[{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{...}]
                    //删除旧的数据，清空子对象
                    $("#province").empty();
                    $.each(resp, function (index, element) {
                        //获取select的dom对象
                        $("#province").append("<option value='" + element.id + "'>" + element.name + "</option>")
                    })
                }
            })
        }

        $(function () {
            //$(function())在页面的dom对象加载成功后执行的函数，再次发起ajax。
            queryProvinceList();
            $("#btnLoad").click(function () {
                queryProvinceList();
            })

            //给省份的select绑定一个事件，当select内容发生变化时，触发事件
            $("#province").change(function () {
                //获取选中的列表框的值
                let obj = $("#province>option:selected");
                // alert(obj.val()+obj.text())
                var provinceId = obj.val();
                // $.ajax({
                //     url:"queryCityList",
                //     data:{"proid":provinceId},
                //     dataType: "json",
                //     success:function (resp) {
                //         // alert(resp)
                //
                //     }
                // })
                $.get("queryCityList", {proid: provinceId}, callback, "json")
            })
        })

        //定义一个处理返回数据的函数
        function callback(resp) {
            // alert(resp)
            //删除旧的数据，清空子对象
            $("#city").empty();
            $.each(resp, function (index, element) {
                //获取select的dom对象
                $("#city").append("<option value='" + element.id + "'>" + element.name + "</option>")
            })
        }
    </script>
</head>
<body>
<p>省市级联查询，使用ajax</p>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td>省份：</td>
        <td>
            <select name="" id="province">
                <option value="0">请选择....</option>
            </select>
            <input type="button" value="load数据" id="btnLoad">
        </td>

    </tr>
    <tr>
        <td>城市：</td>
        <td>
            <select id="city">
                <option value="0">请选择....</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>